<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body,
        ul,
        li,
        button {
            margin: 0;
            padding: 0;
        }
        
        ul {
            list-style-type: none;
        }
        
        button {
            cursor: pointer;
        }
        
        #outer {
            width: 100px;
            margin: 10px auto;
        }
        
        #zi {
            margin-top: 5px;
            background: #fff;
            border: 1px solid #CCC;
            display: none;
        }
        
        #zi li {
            width: 100%;
            line-height: 24px;
            display: inline-block;
            vertical-align: top;
        }
        
        #close {
            border-top: 1px solid #ccc;
        }
        
        #zi li a {
            color: #ccc;
            padding: 0 5px;
            display: block;
            text-decoration: none;
        }
        
        #zi li a:hover {
            background: #d9e1f6;
        }
    </style>
</head>

<body>



    </head>

    <body>
        <div id="outer">
            <button>输入法</button>
            <ul id="zi">
                <li><a href="javascript:;">手写</a></li>
                <li><a href="javascript:;">拼音</a></li>
                <li id="close"><a href="javascript:;">关闭</a></li>
            </ul>
        </div>
    </body>

    <script>
        var an = document.getElementsByTagName("button")[0];
        var xin = document.getElementById("zi");
        var gUan = document.getElementById("close");
        var style = xin.style;

        an.onclick = function() {
            style.display = style.display == "block" ? "none" : "block"
        };

        gUan.onclick = function() {
            style.display = "none"
        }
    </script>

</html>